<template>
  <el-dialog
    title="置换排序值"
    :visible.sync="dialogVisible"
    width="520px"
    top="30px"
    :before-close="cancelBtn"
  >
    <el-form ref="formRef" :model="ruleForm" :rules="formRules" label-width="100px">
      <el-form-item label="排序值：" prop="orderNo">
        <el-input v-model="ruleForm.orderNo" placeholder="请输入排序值" @input="inputValue"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { replaceOrderNo } from "@/api/gwoper/news";
export default {
  name: "newsReplace",
  props: {
    newsDialogFu: [Boolean],
    orderNoFu: [Number, String]
  },
  data() {
    return {
      dialogVisible: this.newsDialogFu,
      orderNo: this.orderNoFu,
      ruleForm: {
        orderNo: null,
      },
      formRules: {
        orderNo: [
          {required: true, message: '请输入排序值', trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
      inputValue(value){
        this.ruleForm.orderNo = value.replace(/[^\d]/g,'')
      },
      submitForm() {
      this.$refs['formRef'].validate((valid) => {
        if (!valid) return
        replaceOrderNo(this.orderNo, this.ruleForm.orderNo)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.$refs['formRef'].resetFields();
            this.dialogVisible = false;
            this.$emit("closeDialog", this.dialogVisible, true);
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    // 取消,关闭弹框，修改父组件的值
    cancelBtn() {
      // this.$refs['formRef'].resetFields();
      this.ruleForm.orderNo = null
      this.dialogVisible = false;
      console.log(this.ruleForm)
      this.$emit("closeDialog", this.dialogVisible);
    }
  },
  watch: {
    newsDialogFu(val) {
      console.log('val', val)
      this.dialogVisible = val;
    },
    orderNoFu(val) {
      console.log('val', val)
      this.orderNo = val;
    },
  },
};
</script>

<style lang="scss">
.el-dialog__header{
  border-bottom: 1px solid #666666;
}
.el-form{
  padding: 0 20px;
  .el-form-item{
    &:last-child{
      .el-form-item__content{
        text-align: center;
        margin-left: 0 !important;
      }
    }
  }
}

</style>
